
<template>
    <div id="slider" class="mui-slider">
        <div class="mui-slider-group mui-slider-loop">
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="javascript:;" :style="ban.img1"></a>
            </div>
            <div class="mui-slider-item">
                <a href="javascript:;" :style="ban.img2"></a>
            </div>
            <div class="mui-slider-item">
                <a href="javascript:;" :style="ban.img3"></a>
            </div>
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="javascript:;" :style="ban.img1"></a>
            </div>
            <div class="mui-slider-item">
                <a href="javascript:;" :style="ban.img2"></a>
            </div>
        </div>
        <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            banner_msg: '',
            banners: [],
            ban: [],
        }
    },
    created() {
        var that = this;
        that.$http({
            url: '/Banner',
            method: 'post',
        }).then((res) => {
            that.banner_msg = res.data;
            setTimeout(function() {
                that.banner_msg.forEach(function(v, i) {
                    that.banners['img' + (i + 1)] = {
                        'backgroundImage': `url('${that.banner_msg[i].imgurl}')`
                    }
                }, this)
                that.$set(that, 'ban', that.banners)
                console.log(that.ban)
            }, 0);
        }).catch((err) => {
            console.log(err)
        })
    },
    mounted() {
        var slider = mui("#slider");
        slider.slider({
            interval: 3000
        });
    },
}
</script>

<style scoped>
#slider a {
    display: flex;
    height: 130px;
    background-size: 100% 100%;
    background-position-x: center;
}

#slider a>img {
    height: 150px;
}
</style>
